<template>
  <div class="container__medical_record">
    <div class="container__medical_record__header">
      <div class="container__medical_record__header__left">今日病历</div>
      <div class="container__medical_record__header__right">查看全部 ></div>
    </div>
    <div class="container__medical_record__list">
      <div
        class="container__medical_record__list__items"
        v-for="(item, index) of medicalItems"
        :key="index"
      >
        <van-skeleton :loading="loading">
          <template #template>
            <div :style="{ display: 'flex', width: '100%' }">
              <div
                :style="{ flex: 1, marginLeft: '16rem', marginRight: '16rem' }"
              >
                <van-skeleton-paragraph row-width="70%" />
                <van-skeleton-paragraph row-width="40%" />
                <van-skeleton-paragraph />
                <van-skeleton-paragraph row-width="50%" />
              </div>
            </div>
          </template>
          <div class="container__medical_record__list__items__top">
            <div class="container__medical_record__list__items__top__name">
              姓名 : <span>{{ item.username }}</span>
            </div>
            <div class="container__medical_record__list__items__top__gender">
              性别 : <span>{{ item.gender }}</span>
            </div>
            <div class="container__medical_record__list__items__top__age">
              年龄 : <span>{{ item.age }}岁</span>
            </div>
          </div>
          <div class="container__medical_record__list__items__mid">
            <p>诊断信息 :</p>
            <span
              class="container__medical_record__list__items__mid__miaoshu"
              >{{ item.message }}</span
            >
          </div>
          <div class="container__medical_record__list__items__bottom">
            <div class="container__medical_record__list__items__bottom__time">
              <!-- {{ util.utc2beijing(item.createTime) }} -->
              19:35:00
            </div>
            <div>{{ item.count }}条</div>
          </div>
          <div class="container__medical_record__list__items__rightUp">
            <span class="iconfont">&#xe65d;</span>
            加入讨论
          </div>
          <div class="container__medical_record__list__items__rightDown">
            {{ item.type > 0 ? "复诊" : "首诊" }}
          </div>
        </van-skeleton>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import api from "../../api";
import storage from "../../utils/storage";
const phone = storage.getItem("userInfo")?.phone;

let medicalItems = ref([]);
let loading = ref(true);
api.getMedicalRecord({ phone }).then((res) => {
  medicalItems.value = res;
  setTimeout(() => {
    loading.value = false;
  }, 0);
});
</script>
<style lang="scss" scoped>
.container__medical_record {
  width: 100%;
  margin-bottom: 20rem;
  &__header {
    display: flex;
    justify-content: space-between;
    padding: 0 20rem;
    &__left {
      font-size: 14rem;
      font-weight: bold;
    }
    &__right {
      font-size: 13rem;
    }
  }
  &__list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    &__items {
      width: 376rem;
      height: 146rem;
      background-color: #ffffff;
      border-radius: 10rem;
      padding: 5rem;
      box-sizing: border-box;
      box-shadow: 0 4rem 8rem #e0e0e0;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      font-size: 14rem;
      color: #919191;
      position: relative;
      overflow: hidden;
      margin-top: 20rem;
      span {
        color: #000;
      }
      &__top {
        display: flex;
        &__gender {
          margin: 0 10rem;
        }
      }
      &__mid {
        p {
          margin-bottom: 10rem;
        }
      }
      &__bottom {
        display: flex;
        &__time {
          margin-right: 10rem;
        }
      }
      &__rightUp {
        position: absolute;
        top: 0;
        right: 0;
        color: #0088dc;
        margin: 5rem 5rem 0 0;
        font-size: 11rem;
        span.iconfont {
          font-size: 15rem;
          color: #691fff;
        }
      }
      &__rightDown {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 44rem;
        height: 20rem;
        background-color: #f68282;
        color: #fff;
        text-align: center;
      }
    }
  }
}
</style>
